<!--
 * @Author: Nico 339477680@qq.com
 * @Date: 2023-05-23 14:33:02
 * @LastEditors: Nico 339477680@qq.com
 * @LastEditTime: 2023-05-26 16:56:51
 * @FilePath: \yunshop-front-master-huzhu\yunshop-front-master\src\views\newPage.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div>
    <div class="flex-col page">
      <div class="flex-col group space-y-137">
        <div class="flex-col section">
          <span class="self-start text" @click="asd">返回</span>
          <div class="flex-col justify-start items-start relative group_2">
            <img class="image" style="margin-left:0px" src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/646c662674467400114fa164/16848277201328259494.png" />
            <span class="font_1 text_2 pos">公示名单</span>
            <span class="font_2 pos_2">PUBLIC LIST</span>
          </div>

          <div>
          <div class="lepin" id="parent">
            <div id="parent" class="parent">
            <div id="child1" class="child">
              <div class="box" v-for="item in ulList" :key="item.id" v-html="`恭喜`+item.member+`用户拼单成功!&nbsp;`+item.created_at.split(' ')[0]"></div>
            </div>
            <div id="child2" class="child"></div>
          </div>
          <!-- <div class="flex-col group_3 space-y-96" v-for="item in ulList">
            <div class="flex-row justify-between" >
              <span class="font_3">
               恭喜{{item.member}}用户拼单成功！
                <br />
              </span>
              <span class="font_3 text_3">
                {{item.created_at}}
                <br />
              </span>
            </div>
          </div> -->
          </div>
        </div>
        </div>
        <div class="flex-col justify-start items-start relative">
          <img class="image image_2" src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/646c662674467400114fa164/16848277201351521780.png" />
          <span class="font_1 text_14 pos_3">我的乐拼</span>
          <span class="font_2 pos_4">MY MUSIC SPELL</span>
        </div>
      </div>
      <div>
      <ul class="tab">
        <li v-for="(tab, index) in tabs" :key="index" @click="qwe(tab,index)"   :class="{ 'is-active': activeTab === index }">{{ tab.name }}</li>
      </ul>
      <div v-for="(tab, index) in tabList" :key="index"  class="tab-content">
       <div style="display: flex; justify-content: space-between; margin: 0 10px;">
        <div>
          排队序号：{{tab.wait_nums}}
      </div>
      <div class='nameoo'>
        <div style="font-size:12px;">{{ tab.status_name }}</div>
      </div>
       </div>

      </div>
  </div>
    </div>
  </div>
</template>

<script>
import new_page_controller from "./new_page_controller";
export default new_page_controller;

</script>

<style scoped>
/************************************************************
** 请将全局样式拷贝到项目的全局 CSS 文件或者当前页面的顶部 **
** 否则页面将无法正常显示                                  **
************************************************************/
.tab {
  display: flex;
  list-style: none;
  margin: 10px;
  padding: 0;
  font-size: 12px;
}
.parent {
  width: 300px;
  height: 400px;
  margin: 0 auto;
  /* background: #242424; */
  overflow: hidden;
}
/*设置的子盒子高度大于父盒子，产生溢出效果*/
.child {
  height: auto;
}
.box {
  margin: 2px 0;
  height: 39px;
  padding-left: 10px;
  font-size: 12px;
}
/* .box:nth-of-type(n) {
  background: #f6f3f3;
}
.box:nth-of-type(2n) {
  background: #e0e9e6;
} */
.toUp {
  margin-top: -40px;
  transition: all 0.5s;
}

/* .list {
  list-style: none;
  width: 100%;
  text-align: center;
  height: 60px;
  padding: 0;
  margin: 0;
} */
/* li {
  text-align: center;
  height: 60px;
  width: 100%;
} */
.tab li {
  cursor: pointer;
  padding: 10px;
}
.nameoo {
  width: 80px;
  height: 20px;
  color:#ffffff;
  border-radius: 5px;
  background-image: url("https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/646c662674467400114fa164/16848277212293736271.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.tab li.is-active {
    color:black;
    border-radius: 5px;
    background-image: url("https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/646c662674467400114fa164/16848277212293736271.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
.lepin {
  width: 350px;
  height: 200px;
  overflow: scroll;
  margin-top:20px;
  background-size: 100% 100%;
/*   background-repeat: no-repeat; */
  background-image: url("../../src/assets/images/qwe.png");
}

.tab-content {
  width: 350px;
    margin-top: 10px;
    padding: 10px;
    height: 40px;
    background-color: #ffffff;
    box-shadow: 3px 2px 6px #ccc;
    border-radius: 5px;
    margin: auto;
    margin-top: 10px;
}
html {
  font-size: 16px;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Microsoft Yahei", sans-serif;
}

body * {
  box-sizing: border-box;
  flex-shrink: 0;

}

#app {
  width: 100vw;
  height: 100vh;
}

.flex-row {
  display: flex;
  flex-direction: row;
}

.flex-col {
  display: flex;
  flex-direction: column;
}

.justify-start {
  justify-content: flex-start;
}

.justify-end {
  justify-content: flex-end;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.justify-around {
  justify-content: space-around;
}

.justify-evenly {
  justify-content: space-evenly;
}

.items-start {
  align-items: flex-start;
}

.items-end {
  align-items: flex-end;
}

.items-center {
  align-items: center;
}

.items-baseline {
  align-items: baseline;
}

.items-stretch {
  align-items: stretch;
}

.self-start {
  align-self: flex-start;
}

.self-end {
  align-self: flex-end;
}

.self-center {
  align-self: center;
}

.self-baseline {
  align-self: baseline;
}

.self-stretch {
  align-self: stretch;
}

.flex-1 {
  flex: 1 1 0%;
}

.flex-auto {
  flex: 1 1 auto;
}

.grow {
  flex-grow: 1;
}

.grow-0 {
  flex-grow: 0;
}

.shrink {
  flex-shrink: 1;
}

.shrink-0 {
  flex-shrink: 0;
}

.relative {
  position: relative;
}
.page {
  padding-left: 6.5px;
  padding-bottom: 6.5px;
  /* background-image: url("../../src/assets/images/qwe.png");
  background-size: 100% 100%;
  background-repeat: no-repeat; */
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;
}
.group {
  padding: 0 5.5px 37px;
}
.space-y-137 > *:not(:first-child) {
  margin-top: 16.5px;
}
.section {
  margin-right: 7.5px;
  padding: 34.5px 4px 27px;
  /* background-image: url("https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/646c662674467400114fa164/16848277201294886385.png");
  background-size: 100% 100%;
  background-repeat: no-repeat; */
}
.text {
  margin-left: 14px;
  color: #231815;
  font-size: 17px;
  font-family: SourceHanSansCN;
  line-height: 15.5px;
  letter-spacing: 0.5px;
}
.group_2 {
  margin-top: 24.5px;
}
.image {
  width: 58px;
  height: 58px;
}
.font_1 {
  font-size: 24px;
  font-family: SourceHanSansCN;
  letter-spacing: 0.5px;
  line-height: 22px;
  font-weight: 500;
}
.text_2 {
  color: #030303;
}
.pos {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
}
.font_2 {
  font-size: 9px;
  font-family: SourceHanSansCN;
  letter-spacing: 0px;
  line-height: 7px;
  color: #595757;
}
.pos_2 {
  position: absolute;
  left: 20.5px;
  bottom: 5.5px;
}
.group_3 {
  padding: 6px 10px;
}
.space-y-96 > *:not(:first-child) {
  margin-top: 11.5px;
}
.font_3 {
  font-size: 12px;
  font-family: SourceHanSansCN;
  line-height: 17px;
  color: #595757;
}
.text_3 {
  margin-right: 1.5px;
}
.text_4 {
  margin-bottom: 1px;
}
.text_5 {
  margin-right: 1.5px;
  margin-top: 1px;
}
.text_6 {
  margin-bottom: 1px;
}
.text_7 {
  margin-right: 1.5px;
  margin-top: 1px;
}
.text_8 {
  margin-bottom: 1.5px;
}
.text_9 {
  margin-right: 1.5px;
  margin-top: 1.5px;
}
.text_10 {
  margin-bottom: 1.5px;
}
.text_11 {
  margin-right: 1.5px;
  margin-top: 1.5px;
}
.text_12 {
  margin-bottom: 1.5px;
}
.text_13 {
  margin-right: 1.5px;
  margin-top: 1.5px;
}
.image_2 {
  margin-left: 6px;
}
.text_14 {
  color: #231815;
}
.pos_3 {
  position: absolute;
  left: 23.5px;
  top: 50%;
  transform: translateY(-50%);
}
.pos_4 {
  position: absolute;
  left: 26px;
  bottom: 5.5px;
}
.space-y-204 > *:not(:first-child) {
  margin-top: 24.5px;
}
.group_4 {
  padding: 0 6.5px;
}
.text-wrapper {
  padding-bottom: 6px;
  background-image: url("https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/646c662674467400114fa164/16848277201241077083.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  height: 17px;
}
.font_4 {
  font-size: 12px;
  font-family: SourceHanSansCN;
  line-height: 11px;
  font-weight: 500;
  color: #595757;
}
.text_15 {
  margin-left: 7px;
  margin-right: 3px;
  color: #ffffff;
}
.text_16 {
  margin-right: 2.5px;
}
.group_5 {
  height: 382px;
}
/* .list {
  padding-bottom: 53.5px;
} */
.section_2 {
  padding: 7px 0 13.5px;
  background-image: url("https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/646c662674467400114fa164/16848277201481153454.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.section_3 {
  margin-left: 10.5px;
  margin-right: 11px;
  padding: 7.5px 24px;
  background-image: url("https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/646c662674467400114fa164/16848277207144372094.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.font_6 {
  font-size: 14px;
  font-family: SourceHanSansCN;
  line-height: 13px;
  color: #3e3a39;
}
.text-wrapper_2 {
  margin-right: 13px;
  padding: 6.5px 0 5px;
  background-image: url("https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/646c662674467400114fa164/16848277208405207822.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 64.5px;
  height: 24.5px;
}
.font_5 {
  font-size: 14px;
  font-family: SourceHanSansCN;
  line-height: 13px;
  color: #ffffff;
}
.section_14 {
  margin-left: 1.5px;
  margin-top: -5.5px;
  padding: 15px 33.5px 19.5px;
  background-image: url("https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/646c662674467400114fa164/16848277210186313876.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.text-wrapper_8 {
  margin-right: 14px;
  padding: 6.5px 0 5px;
  background-image: url("https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/646c662674467400114fa164/16848277210974070010.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 64.5px;
  height: 24.5px;
}
</style>
